<template>
  <div class="mod-prod-sku-tag">
    <el-form-item label="商品规格">
      <el-button size="mini" @click="shopTagInput()">添加规格</el-button>
      <div v-for="(tag, tagIndex) in skuTags" :key="tagIndex">
        <span>{{ tag.tagName }}</span>
        <el-button class="button-new-tag" type="text" icon="el-icon-delete" @click="removeTag(tagIndex)">删除</el-button>
        <br>
        <el-tag
          v-for="(tagItem, tagItemIndex) in tag.tagItems"
          :key="tagItem.index + 'tab'"
          closable
          :disable-transitions="false"
          @close="handleTagClose(tagIndex, tagItemIndex)"
        >
          {{ tagItem.value }}
        </el-tag>
        <!-- <el-input
          v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"
          :ref="`saveTagInput${tagIndex}`"
          v-model="tagItemInputs[tagIndex].value"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm(tagIndex)"
          @blur="handleInputConfirm(tagIndex)"
        /> -->
        <!-- <el-button v-else class="button-new-tag" size="small" @click="showTagInput(tagIndex)">+ 添加</el-button> -->
      </div>
    </el-form-item>
    <el-form-item v-show="isShowTagInput" label="规格名">
      <el-col :span="8">
        <el-select v-model="addTagInput.propName" filterable allow-create default-first-option placeholder="请选择" @change="handleTagClick">
          <el-option
            v-for="item in unUseTags"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item v-show="isShowTagInput" label="规格值">
      <el-col :span="8">
        <el-select v-model="addTagInput.selectValues" multiple filterable allow-create default-first-option placeholder="请选择">
          <el-option
            v-for="item in dbTagValues"
            :key="item.valueId"
            :label="item.propValue"
            :value="item.propValue"
          />
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button v-show="isShowTagInput" size="mini" type="primary" @click="addTag()">确定</el-button>
      <el-button v-show="isShowTagInput" size="mini" @click="hideTagInput()">取消</el-button>
    </el-form-item>

  </div>
</template>

<script>
import prodApi from '@/api/prod'
export default {
  props: {
  //   tags: { // sku的标记
  //     default: [],
  //     type: Array
  //   }
  // },
    skuList: {
      default: []
    }
  },
  data() {
    return {
      value: [],
      isShowTagInput: false,
      addTagInput: {
        propName: '',
        selectValues: []
      },
      type: 0,
      tagItemName: '',
      tagName: '',
      tagNameIndex: 0,
      tagItemInputs: [],
      // sku的标记
      // tags: [],
      // 数据库中的规格
      dbTags: [],
      // 根据选定的规格所查询出来的规格值
      dbTagValues: [],
      specs: [], // 使用的规格
      maxValueId: 0, // 规格值id最大
      maxPropId: 0, // 规格id 最大
      initing: false,
      skuTags: []
    }
  },
  computed: {
    // // 未使用的规格, 通过计算属性计算
    unUseTags() {
      const res = []

      for (let i = 0; i < this.dbTags.length; i++) {
        const dbTag = this.dbTags[i]
        const specIndex = this.skuTags.findIndex(tag => tag.tagName === dbTag.name)
        if (specIndex === -1) {
          res.push(dbTag)
        }
      }
      return res
    }
    // skuTags: {
    //   get() {
    //     console.log('this.$store.state.prod.skuTags----->', this.$store.state.prod.skuTags)
    //     return this.$store.state.prod.skuTags
    //   },
    //   set(val) { this.$store.commit('prod/updateSkuTags', val) }
    // },
    // defalutSku() {
    //   return this.$store.state.prod.defalutSku
    // }
  },
  watch: {
    skuTags: {
      handler(val, oldVal) {
        this.$emit('change', val)
      },
      deep: true
    }
  },
  created: function() {
    prodApi.prodSpecList().then(({ data }) => {
      this.dbTags = data
      console.log('this.dbTags------>', this.dbTags)
      // if (data) {
      //   this.maxPropId = Math.max.apply(Math, data.map(item => { return item.propId }))
      // } else {
      //   this.maxPropId = 0
      // }
    })
    // prodApi.prodSpecListSpecMaxValueId().then(({ data }) => {
    //   console.log('this.prodSpecListSpecMaxValueId------>', data)
    //   if (data) {
    //     this.maxValueId = data
    //   } else {
    //     this.maxValueId = 0
    //   }
    // })
  },
  methods: {
    init(skuList) {
      console.log('skuList---x-xx---->', skuList)
      // this.value = skuList
      // if (!skuList || !skuList.length) {
      //   this.skuTags = []
      //   this.$emit('change', [Object.assign({}, this.defalutSku)])
      //   return
      // }
      // this.initing = true
      // const skuTags = []
      // for (let i = 0; i < skuList.length; i++) {
      //   const sku = skuList[i]
      //   if (!sku.properties) break
      //   const propertiesArray = sku.properties.split(';')
      //   for (const j in propertiesArray) {
      //     const properties = propertiesArray[j].split(':')
      //     if (!skuTags[j]) {
      //       skuTags[j] = {
      //         tagName: properties[0],
      //         tagItems: []
      //       }
      //       this.tagItemInputs.push({ visible: false, value: '' })
      //     }
      //     const tagItemNameIndex = skuTags[j].tagItems.findIndex((tagItemName) => tagItemName.propValue === properties[1])
      //     if (tagItemNameIndex === -1) {
      //       // skuTags[j].tagItems.push(properties[1])
      //       skuTags[j].tagItems.push({ propValue: properties[1] })
      //     }
      //   }
      // }
      // this.skuTags = skuTags
    },
    // 显示规格名、规格值输入框
    shopTagInput() {
      this.isShowTagInput = !this.isShowTagInput
    },
    // 隐藏规格名、规格值输入框
    hideTagInput() {
      this.isShowTagInput = false
      this.cleanTagInput()
    },
    addTag() {
      const selectValues = this.addTagInput.selectValues
      if (!this.addTagInput.propName) {
        this.$message.error('请输入规格名')
        return
      }
      if (!selectValues.length) {
        this.$message.error('请输入规格值')
        return
      }

      const tagList = []

      selectValues.forEach((item, index) => {
        const tagData = {
          abs: '',
          tsb: null,
          yxbj: '',
          dzlxs: [],
          qmbj: null,
          zsl: '',
          index: index,
          value: ''
        }
        tagData.zsl = item
        tagData.value = item
        tagList.push(tagData)
      })

      const tag = {
        tagName: this.addTagInput.propName,
        tagItems: tagList
      }
      this.skuTags.push(tag)
      this.cleanTagInput()
      this.isShowTagInput = false
      // for (let i = 0; i < selectValues.length; i++) {
      //   const element = selectValues[i]
      //   const is = Object.prototype.toString.call(element) === '[object Object]'
      //   if (!is) {
      //     this.maxPropId = this.maxPropId + 1
      //     break
      //   }
      // }
      // addTagInput.selectValues
      // const tagItems = []
      // for (let i = 0; i < selectValues.length; i++) {
      //   const element = selectValues[i]
      //   const is = Object.prototype.toString.call(element) === '[object Object]'
      //   if (is) {
      //     tagItems.push(element)
      //   } else {
      //     this.maxValueId = this.maxValueId + 1
      //     tagItems.push({ propId: this.maxPropId, propValue: element, valueId: this.maxValueId })
      //   }
      // }
      // // // 向规格中放入规格输入框内的数据
      // this.$store.commit('prod/addSkuTag', {
      //   tagName: this.addTagInput.propName,
      //   tagItems
      // })
      // this.type = 1
      // this.cleanTagInput()
    },
    // 清除规格值输入框内容
    cleanTagInput() {
      this.addTagInput = {
        propName: '',
        selectValues: []
      }
      this.dbTagValues = []
    },
    // 规格名输入框，选中规格事件
    handleTagClick() {
      // 清空规格值输入框
      this.dbTagValues = []
      this.addTagInput.selectValues = []
      // 判断规格名输入的值是否为数据库中已有的值
      const specsIndex = this.dbTags.findIndex(spec => spec.name === this.addTagInput.propName)
      // 如果不是，则说明为用户随便输入
      if (specsIndex === -1) return
      // 如果数据库已有该规格名，则获取根据id获取该规格名称含有的规格值
      prodApi.prodSpecListSpecValueById(this.dbTags[specsIndex].id).then(({ data }) => {
        this.dbTagValues = data
      })
    },
    // // 关闭标签 --删除
    handleTagClose(tagIndex, tagItemIndex) {
      this.tagName = this.skuTags[tagIndex].tagName
      this.tagNameIndex = tagIndex
      this.tagItemName = this.skuTags[tagIndex].tagItems[tagItemIndex].propValue
      if (this.skuTags[tagIndex].tagItems.length === 1) {
        return
      }
      this.skuTags[tagIndex].tagItems.splice(tagItemIndex, 1)
    },
    // // 标签输入框确定时调用
    // handleInputConfirm(tagIndex) {
    //   if (this.checkTagItem(tagIndex)) {
    //     return
    //   }
    //   var tagItems = this.skuTags[tagIndex].tagItems
    //   var itemValue = this.tagItemInputs[tagIndex].value
    //   const index = tagItems.length - 1
    //   this.tagName = this.skuTags[tagIndex].tagName
    //   this.tagItemName = this.tagItemInputs[tagIndex].value
    //   const maxValue = this.getMaxValueId(this.skuTags[tagIndex].tagItems)
    //   const tagItem = { propId: index === -1 ? 0 : this.skuTags[tagIndex].tagItems[index].propId, propValue: itemValue, valueId: index === -1 ? 0 : (maxValue + 1) }
    //   if (tagItem) {
    //     this.$store.commit('prod/addSkuTagItem', { tagIndex, tagItem })
    //   }
    //   this.tagItemInputs[tagIndex].visible = false
    //   this.tagItemInputs[tagIndex].value = ''
    //   this.type = 2
    // },
    // 显示标签输入框
    showTagInput(tagIndex) {
      this.tagItemInputs.push({ visible: false, value: '' })
      this.tagItemInputs[tagIndex].visible = true
      this.$nextTick(() => {
        this.$refs[`saveTagInput${tagIndex}`][0].$refs.input.focus()
      })
    },
    // 获取数据集合所有对象中某个属性的最大值
    getMaxValueId(list) {
      const value = Math.max.apply(Math, list.map(item => { return item.valueId }))
      return value
    },
    // 删除 规格
    removeTag(tagIndex) {
      this.type = 3
      this.$store.commit('prod/removeSkuTag', tagIndex)
    },
    /**
     * 新增规格值时，判断是否存在同名的规格值
     */
    checkTagItem(tagIndex) {
      const tagItem = this.tagItemInputs[tagIndex].value
      if (!tagItem) {
        this.tagItemInputs[tagIndex].visible = false
        this.tagItemInputs[tagIndex].value = ''
        return true
      }
      var isSame = false
      this.skuTags.forEach(tag => {
        const arr = tag.tagItems.map((item, index) => {
          return item.propValue
        })
        if (arr.indexOf(tagItem) > -1) {
          isSame = true
          this.$message.error('product.specificationValue')
          return false
        }
      })
      return isSame
    }
  }
}
</script>

<style lang="scss">
.mod-prod-sku-tag {
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}

// 新增规格外部边框
.sku-border{
  border: 1px solid #EBEEF5;
  width:70%
}
.sku-background{
  background-color: #F6f6f6;
  margin: 12px 12px;
  .el-button{
    margin-left: 10px;
    span{
      color:#000 !important;
    }
  }
  .el-form-item__label{
    padding:0 24px 0 0
  }
}
.sku-tag{
  margin: 12px 12px;
}
.tagTree{
  margin-left: 18px;
  padding-bottom:8px;
}
</style>
